<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食光集 - 我的收藏</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF9AA2',
                        secondary: '#FFB7B2',
                        accent: '#FFDAC1',
                        light: '#E2F0CB',
                        dark: '#B5EAD7',
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .nav-tab {
            position: relative;
            transition: all 0.3s ease;
        }
        .nav-tab.active {
            color: #FF9AA2;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #FF9AA2;
            border-radius: 3px;
        }
        .recipe-card {
            transition: transform 0.3s;
        }
        .recipe-card:hover {
            transform: translateY(-5px);
        }
        .filter-tag {
            transition: all 0.3s ease;
        }
        .filter-tag.active {
            background-color: #FF9AA2;
            color: white;
        }
    </style>
</head>
<body class="bg-gradient-to-b from-pink-50 to-white">
    <!-- 顶部导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md shadow-sm z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="discover.html" class="text-gray-600">
                <i class="fas fa-chevron-left"></i>
            </a>
            <h1 class="text-xl font-bold text-gray-800">我的收藏</h1>
            <div class="w-6"></div>
        </div>
    </nav>

    <!-- 内容区域 -->
    <div class="container mx-auto px-4 pt-20 pb-24">
        <!-- 搜索栏 -->
        <div class="glass-effect rounded-xl p-3 mb-4 flex items-center">
            <i class="fas fa-search text-gray-400 mr-2"></i>
            <input type="text" placeholder="搜索收藏的菜谱..." class="flex-1 bg-transparent outline-none text-gray-600 placeholder-gray-400">
        </div>

        <!-- 筛选标签 -->
        <div class="mb-4 overflow-x-auto">
            <div class="flex space-x-2 pb-2">
                <button class="filter-tag active px-4 py-2 rounded-full bg-primary/10 text-primary text-sm whitespace-nowrap">
                    全部收藏
                </button>
                <button class="filter-tag px-4 py-2 rounded-full bg-gray-100 text-gray-600 text-sm whitespace-nowrap">
                    最近收藏
                </button>
                <button class="filter-tag px-4 py-2 rounded-full bg-gray-100 text-gray-600 text-sm whitespace-nowrap">
                    家常菜
                </button>
                <button class="filter-tag px-4 py-2 rounded-full bg-gray-100 text-gray-600 text-sm whitespace-nowrap">
                    甜点
                </button>
                <button class="filter-tag px-4 py-2 rounded-full bg-gray-100 text-gray-600 text-sm whitespace-nowrap">
                    早餐
                </button>
            </div>
        </div>

        <!-- 收藏列表 -->
        <div class="space-y-4">
            <!-- 收藏项 -->
            <div class="recipe-card glass-effect rounded-xl overflow-hidden">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="菜谱" class="w-full h-48 object-cover">
                    <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-md flex items-center justify-center text-primary">
                        <i class="fas fa-heart"></i>
                    </button>
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 mb-1">健康早餐碗</h3>
                    <p class="text-gray-600 text-sm mb-2">营养均衡，能量满满</p>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center text-gray-500 text-sm">
                            <i class="fas fa-clock mr-1"></i>
                            <span>15分钟</span>
                            <i class="fas fa-fire ml-3 mr-1"></i>
                            <span>简单</span>
                        </div>
                        <span class="text-primary text-sm">收藏于 2天前</span>
                    </div>
                </div>
            </div>

            <!-- 收藏项 -->
            <div class="recipe-card glass-effect rounded-xl overflow-hidden">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="菜谱" class="w-full h-48 object-cover">
                    <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-md flex items-center justify-center text-primary">
                        <i class="fas fa-heart"></i>
                    </button>
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 mb-1">意大利面</h3>
                    <p class="text-gray-600 text-sm mb-2">简单美味，快速料理</p>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center text-gray-500 text-sm">
                            <i class="fas fa-clock mr-1"></i>
                            <span>20分钟</span>
                            <i class="fas fa-fire ml-3 mr-1"></i>
                            <span>中等</span>
                        </div>
                        <span class="text-primary text-sm">收藏于 1周前</span>
                    </div>
                </div>
            </div>

            <!-- 收藏项 -->
            <div class="recipe-card glass-effect rounded-xl overflow-hidden">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="菜谱" class="w-full h-48 object-cover">
                    <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-md flex items-center justify-center text-primary">
                        <i class="fas fa-heart"></i>
                    </button>
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 mb-1">香煎鸡胸肉</h3>
                    <p class="text-gray-600 text-sm mb-2">低脂高蛋白，健身必备</p>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center text-gray-500 text-sm">
                            <i class="fas fa-clock mr-1"></i>
                            <span>25分钟</span>
                            <i class="fas fa-fire ml-3 mr-1"></i>
                            <span>简单</span>
                        </div>
                        <span class="text-primary text-sm">收藏于 2周前</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md py-2 px-4 flex justify-around items-center shadow-sm">
        <a href="index.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="discover.html" class="nav-tab active flex flex-col items-center">
            <i class="fas fa-compass text-xl"></i>
            <span class="text-xs mt-1">发现</span>
        </a>
        <a href="menu.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-list text-xl"></i>
            <span class="text-xs mt-1">菜单</span>
        </a>
        <a href="profile.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </div>

    <script>
        // 筛选标签切换
        const filterTags = document.querySelectorAll('.filter-tag');
        filterTags.forEach(tag => {
            tag.addEventListener('click', () => {
                filterTags.forEach(t => t.classList.remove('active', 'bg-primary/10', 'text-primary'));
                filterTags.forEach(t => t.classList.add('bg-gray-100', 'text-gray-600'));
                tag.classList.add('active', 'bg-primary/10', 'text-primary');
                tag.classList.remove('bg-gray-100', 'text-gray-600');
            });
        });

        // 收藏按钮点击事件
        const likeButtons = document.querySelectorAll('.recipe-card button');
        likeButtons.forEach(button => {
            button.addEventListener('click', function() {
                this.classList.toggle('text-red-500');
                this.classList.toggle('text-primary');
            });
        });
    </script>
</body>
</html> 